<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="js-css::html('图书管理')"></head>
<style>
    table {
        border: 1px solid black;
    }

    table {
        width: 100%;
    }

    th {
        height: 50px;
    }

    th, td {
        border-bottom: 1px solid #ddd;
    }
</style>

<script th:inline="javascript"> var ctx = [[@{/}]]; </script>

<body>
<div id="app">
    <div>
        <h1>列表</h1>
        <label>名称：</label><input type="text" v-model="query.title"/>
        <label>价格：</label><input type="text" v-model="query.price"/>
        <button type="button" v-on:click="querydata">查询</button>
        <button type="button" v-on:click="exportdata">导出Excel</button>
        <label>选择文件：</label><input type="file" id="filepath" accept="application/vnd.ms-excel">
        <button type="button" v-on:click="importdata">导入Excel</button>
        <br>
        <table>
            <tr>
                <th>行号</th>
                <th>ID</th>
                <th>名称</th>
                <th>价格</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tbody id="tushubook">
            <tr v-for="(book, key) in jsbooks" :key="book.id">
                <td>{{key + 1}}</td>
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.price }}</td>
                <td>{{ book.publishDate }}</td>
                <td>
                    <button v-on:click="setBook(book)">修改</button>
                    <button v-on:click="ddeleteBook(book.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <br>
    <div style="width: 50%; height:200px; display: inline-block">
        <h2>添加</h2>
        <label>名称：</label><input type="text" v-model="title"/>
        <br>
        <label>价格：</label><input type="text" v-model="price"/>
        <br>
        <button type="button" v-on:click="addbooks">添加</button>
    </div>
    <div style="width: 50%; height: 200px; float: right; display: inline-block">
        <h2>修改</h2>
        <label>ID:{{update.id}}</label>
        <br>
        <label>名称：</label><input type="text" v-model="update.title"/>
        <br>
        <label>价格：</label><input type="text" v-model="update.price"/>
        <br>
        <button type="button" v-on:click="upbooks">修改</button>
    </div>
</div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            query: {//查询条件
                title: "",
                price: 0
            },
            jsbooks: [],//查询数据
            update: {//修改数据
                id: 0,
                title: "",
                price: 0
            },
            title: '测试',//添加数据
            price: 10
        },
        mounted: function () {
           this.querydata();
        },
        // 在 `methods` 对象中定义方法
        methods: {
            querydata: function () {
                var _this=this;
                let param = new URLSearchParams();
                param.append('title', this.query.title);
                param.append('price', this.query.price);
                //this.$nextTick(function () {
                    axios.post('/system/books/query', param).then(function (response) {
                        let bookdata = JSON.parse(JSON.stringify(response.data));
                        _this.jsbooks = bookdata;
                        console.log(_this.jsbooks);
                        // this.jsbooks = [];
                        // for (var i=0; i< bookdata.length; i++){
                        //     var arrr= {
                        //         id:bookdata[i].id,
                        //         title:bookdata[i].title,
                        //         price:bookdata[i].price,
                        //         publishDate:bookdata[i].publishDate,
                        //     }
                        //     this.jsbooks.push(arrr);
                        // }
                    }).catch(function (error) {
                        console.log(error);
                    })
                //});
            },
            addbooks: function () {
                var _this=this;
                let param = new URLSearchParams();
                param.append('title', this.title);
                param.append('price', this.price);
                param.append('publishDate', new Date());
                axios.post('/system/books/add', param).then(function (response) {
                    console.log(response);
                    _this.querydata();
                }).catch(function (error) {
                    console.log(error);
                });
                //发送 post 请求
                // this.$http.post('/system/books/add', {
                //     title: this.title,
                //     price: this.price
                // }, {emulateJSON: true}).then(function (res) {
                //     document.write(res.body);
                // }, function (res) {
                //     console.log(res.status);
                // });
            },
            setBook: function (book) {
                this.update.id = book.id;
                this.update.title = book.title;
                this.update.price = book.price;
            },
            upbooks: function () {
                var _this=this;
                let param = new URLSearchParams();
                param.append('id', this.update.id);
                param.append('title', this.update.title);
                param.append('price', this.update.price);
                param.append('publishDate', new Date());
                axios.post('/system/books/updatebook', param).then(function (response) {
                    if (response.data) {
                        _this.update.id = 0;
                        _this.update.title = "";
                        _this.update.price = 0;
                        _this.querydata();
                    } else {
                        alert('修改失败');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            ddeleteBook: function (id) {
                var _this=this;
                var url = "/system/books/deletebook/" + id;
                axios.get(url).then(function (response) {
                    if (response.data) {
                        alert(response.data);
                        _this.querydata();
                    } else {
                        console.log(response.data);
                    }
                });
            },
            exportdata:function () {
                let param = new URLSearchParams();
                param.append('title', this.query.title);
                param.append('price', this.query.price);

                axios.post('/system/books/export', param).then(function (response) {
                    let bookdata = JSON.parse(JSON.stringify(response.data));
                    window.location.href=ctx +"common/download?fileName=" + bookdata.msg + "&delete=" + true;;
                    console.log(bookdata);
                }).catch(function (error) {
                    console.log(error);
                })
            },
            importdata:function () {
                let filepath =document.getElementById("filepath").files[0];
                if(filepath == null) {
                    alert('不是有效的文件！');
                    return;
                }
                console.log(filepath);
                var formData = new FormData();
                formData.append("file", filepath);
                // let ctx ='http://localhost:8017/';
                axios.post('/system/books/importData', formData).then(function (response) {
                    let messge = JSON.parse(JSON.stringify(response.data));
                    console.log(messge);
                }).catch(function (error) {
                    console.log(error);
                })
            }
        }
    })
</script>

</html>